import React, {useState} from 'react';
import {
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  Button,
  TextInput,
} from 'react-native';

const Withdrawal = ({navigation}) => {
  const [amount, setAmount] = useState('');
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <View style={styles.title}>
          <Text style={styles.titleText}>提現申請</Text>
        </View>
        <View style={styles.address}>
          <Text style={styles.addressText1}>提現 USDT 錢包地址</Text>
          <Text style={styles.addressText2}>
            TJtEmkvttLEjpNcy4QXSwVWr3FagXBgTaa
          </Text>
          <View
            style={styles.changeWallet}
            onPress={() => navigation.navigate('PurseListScreen')}>
            <Text style={styles.addressText3}>更換錢包＞</Text>
          </View>
        </View>
        <View style={styles.amount}>
          <Text style={styles.amountTitle}>請輸入提現金額</Text>
          <View style={styles.amountInputContainer}>
            <View style={styles.amountInputLeft}>
              <TextInput
                style={styles.amountInput}
                onChangeText={text => setAmount(text)}
                value={amount}
              />
            </View>
            <View style={styles.amountInputRight}>
              <Text style={styles.amountInputText}>USDT</Text>
            </View>
          </View>
          <Text style={styles.amountSurplus}>
            目前現有餘額：123,456,789.00 USDT
          </Text>
          <View style={styles.amountCard}>
            <View style={styles.amountCardMain}>
              <View style={styles.amountCardMainOne}>
                <Text style={styles.amountCardMainOneText1}>扣除金額</Text>
                <Text style={styles.amountCardMainOneText2}>0.00 USDT</Text>
              </View>
              <View style={styles.amountCardMainTwo}>
                <Text style={styles.amountCardMainTwoText1}>
                  用戶提現抽成：
                </Text>
                <Text style={styles.amountCardMainTwoText2}>0.00 USDT</Text>
              </View>
              <View style={styles.amountCardMainThree}>
                <Text style={styles.amountCardMainThreeText1}>手續費：</Text>
                <Text style={styles.amountCardMainThreeText2}>0.00 USDT</Text>
              </View>
            </View>
            <View style={styles.amountCardFooter}>
              <View style={styles.amountCardFooterOne}>
                <Text style={styles.amountCardFooterOneText1}>
                  實際到帳金額
                </Text>
                <Text style={styles.amountCardFooterOneText2}>0.00 USDT</Text>
              </View>
            </View>
          </View>
        </View>
        <View style={styles.Withdrawal}>
          <View style={styles.WithdrawalButton}>
            <Button
              title="取消"
              color="#999999"
              onPress={() => navigation.navigate('HomeScreen')}
            />
          </View>
          <View style={styles.WithdrawalButtonRight}>
            <Button
              title="確認"
              color="#FF9800"
              onPress={() => navigation.navigate('HomeScreen')}
            />
          </View>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingLeft: 50,
    paddingRight: 50,
  },
  title: {
    height: 75,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  titleText: {
    color: '#17141a',
    fontWeight: 'bold',
    fontSize: 20,
  },
  address: {
    position: 'relative',
    height: 110,
    display: 'flex',
    alignItems: 'center',
    backgroundColor: '#6096E6',
    justifyContent: 'center',
    borderRadius: 10,
    paddingBottom: 10,
  },
  addressText1: {
    fontSize: 22,
    lineHeight: 30,
    color: 'white',
    fontWeight: 'bold',
  },
  addressText2: {
    fontSize: 12,
    lineHeight: 30,
    color: 'white',
    fontWeight: 'bold',
  },
  changeWallet: {
    position: 'absolute',
    bottom: 5,
    right: 10,
  },
  addressText3: {
    fontSize: 12,
    lineHeight: 22,
    color: 'white',
    fontWeight: 'bold',
  },
  amount: {
    marginTop: 10,
  },
  amountTitle: {
    fontSize: 14,
    fontWeight: 'bold',
    lineHeight: 30,
    color: '#3d85e5',
  },
  amountInputContainer: {
    marginTop: 5,
    display: 'flex',
    flexDirection: 'row',
  },
  amountInputLeft: {
    flexGrow: 1,
  },
  amountInputRight: {
    marginLeft: 10,
  },
  amountInput: {
    height: 28,
    lineHeight: 26,
    borderWidth: 1,
    borderColor: '#a8a8a8',
    borderRadius: 8,
  },
  amountInputText: {
    lineHeight: 30,
  },
  amountSurplus: {
    lineHeight: 30,
    fontSize: 12,
    color: 'red',
  },
  amountCard: {
    backgroundColor: 'white',
    borderRadius: 8,
  },
  amountCardMain: {
    height: 76,
    backgroundColor: 'white',
    paddingTop: 5,
  },
  amountCardFooter: {
    borderTopColor: '#e9e9e9',
    borderTopWidth: 1,
    height: 32,
    backgroundColor: 'white',
  },
  amountCardMainOne: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row',
    paddingLeft: 10,
    paddingRight: 10,
  },
  amountCardMainOneText1: {
    fontSize: 14,
    color: '#6096E6',
    fontWeight: 'bold',
  },
  amountCardMainOneText2: {
    fontSize: 14,
    color: '#333333',
  },
  amountCardMainTwo: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row',
    paddingLeft: 10,
    paddingRight: 10,
    marginTop: 4,
  },
  amountCardMainTwoText1: {
    fontSize: 12,
    color: '#666',
    lineHeight: 22,
  },
  amountCardMainTwoText2: {
    fontSize: 12,
    color: '#666',
    lineHeight: 22,
  },
  amountCardMainThree: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row',
    paddingLeft: 10,
    paddingRight: 10,
  },
  amountCardMainThreeText1: {
    fontSize: 12,
    color: '#666',
    lineHeight: 22,
  },
  amountCardMainThreeText2: {
    fontSize: 12,
    color: '#666',
    lineHeight: 22,
  },
  amountCardFooterOne: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row',
    height: 32,
    paddingLeft: 10,
    paddingRight: 10,
  },
  amountCardFooterOneText1: {
    fontSize: 14,
    color: '#6096E6',
    fontWeight: 'bold',
  },
  amountCardFooterOneText2: {
    fontSize: 14,
    color: '#666',
    fontWeight: 'bold',
  },
  Withdrawal: {
    marginTop: 50,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
  },
  WithdrawalButton: {
    width: 100,
  },
  WithdrawalButtonRight: {
    width: 100,
    marginLeft: 20,
  },
});

export default Withdrawal;
